<template>
  <div>
    <div class="icon_picker_btn">
      <a-button @click="showPopover">
        <template #icon>
          <component :is="modelValue" v-if="modelValue"></component>
        </template>
        {{ modelValue || "请选择图标" }}
      </a-button>
      <CloseOutlined v-if="modelValue" class="delete_icon" size="16" title="清除" @click="clearPicker" />
    </div>

    <a-modal v-model:open="showPopv" width="440px" title="icon" :footer="null">
      <a-input v-model:value="filterVal" class="filter_input" placeholder="输入图标查询" @change="inputFilter">
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>

      <div class="el-icon-picker">
        <a-tabs v-model:activeKey="activeName">
          <a-tab-pane key="el" tab="el-icon">
            <div class="icon_con">
              <template v-for="icon in advIconList" :key="icon">
                <component :is="icon" class="icon" :class="{ icon, 'icon-active': icon == modelValue }" :title="icon" @click="chooseIcon(icon)" />
              </template>
            </div>
          </a-tab-pane>
          <a-tab-pane key="my" tab="my-icon">
            <div class="icon_con">
              <template v-for="icon in myIconList" :key="icon">
                <component :is="icon" class="icon" :class="{ icon, 'icon-active': icon == modelValue }" :title="icon" @click="chooseIcon(icon)" />
              </template>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup name="ComElIconPicker">
import { ref, watch } from "vue";
import * as AdvIconComps from "@ant-design/icons-vue/lib/icons";
import { myIconNames } from "../SvgIcon/myIcon";

// 获取所有elment Icon name
const advIcons: string[] = [];
for (const [key] of Object.entries(AdvIconComps)) {
  advIcons.push(key);
}
// 获取所有自定义 Icon name
const myIcons = myIconNames;

const activeName = ref("el");

const advIconList = ref<string[]>([]);
const myIconList = ref<string[]>([]);
const filterVal = ref("");
const showPopv = ref(false);

const emit = defineEmits<{ (event: "update:modelValue", value: string): void }>();

withDefaults(
  defineProps<{
    modelValue?: string;
  }>(),
  {
    modelValue: "",
  }
);

watch(
  () => showPopv.value,
  (newVal) => {
    if (newVal) {
      filterVal.value = "";
      inputFilter();
    }
  }
);

const showPopover = () => {
  filterVal.value = "";
  showPopv.value = true;
};

const chooseIcon = (icon: string) => {
  emit("update:modelValue", icon);
  showPopv.value = false;
};

// 图标过滤查询
const inputFilter = () => {
  if (filterVal.value) {
    advIconList.value = advIcons.filter((item) => item.toLowerCase().indexOf(filterVal.value.toLowerCase()) !== -1);
    myIconList.value = myIcons.filter((item) => item.toLowerCase().indexOf(filterVal.value.toLowerCase()) !== -1);
  } else {
    advIconList.value = [];
    advIconList.value = advIconList.value.concat(advIcons);
    myIconList.value = [];
    myIconList.value = myIconList.value.concat(myIcons);
  }
};

// 清除选中
const clearPicker = () => {
  emit("update:modelValue", "");
};
</script>

<style scoped lang="less">
.icon_picker_btn {
  display: flex;
  align-content: center;

  .delete_icon {
    line-height: 32px;
    cursor: pointer;
    visibility: hidden;
    padding: 0 5px;
  }

  .delete_icon:hover {
    color: red;
  }
}

.icon_picker_btn:hover {
  .delete_icon {
    visibility: visible;
  }
}

.filter_input {
  width: 100%;
  padding: 0 12px;
  height: 32px;
  box-sizing: border-box;
}

.el-icon-picker {
  height: 320px;

  .icon_con {
    height: 260px;
    width: 400px;
    overflow-y: auto;

    .icon {
      cursor: pointer;
      text-align: center;
      font-size: 20px;
      line-height: 45px;
      margin: 10px;
    }

    .icon:hover {
      color: #1677ff;
    }

    .icon-active {
      color: #1677ff;
    }
  }
}
</style>
